<template>
  <div class="article-bg">
    <div class="triangle-a"></div>
    <div class="triangle-b"></div>
    <div class="triangle-c"></div>
    <div class="triangle-d"></div>
    <div class="triangle-e"></div>
  </div>
</template>

<script>
export default {
  name: "ArticleBg",
  props: {

  },
  data() {
    return {

    };
  },
  computed: {

  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.article-bg {
  overflow: hidden;
  .triangle-a {
    position: fixed;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 254px 0 0 315px;
    border-color: transparent transparent transparent #9baec2;
  }

  .triangle-b {
    position: fixed;
    bottom: 50vh;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 127px 0 127px 400px;
    border-color: transparent transparent transparent #9baec2;
  }

  .triangle-c {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 377px 400px;
    border-color: transparent transparent #9baec2 transparent;
  }

  .triangle-d {
    position: fixed;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 200px 200px 0;
    border-color: transparent #e5f2ff transparent transparent;
  }

  .triangle-e {
    position: fixed;
    left: 15vw;
    top: 5vh;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 100px 200px 100px;
    border-color: transparent transparent #e5f2ff transparent;
  }
}

</style>
